<template>
    <div id="basicLayout">
     <a-layout style = "min-height: 100vh;">
        <a-layout-header class = "header">
          <GlobalHeader />
        </a-layout-header>
       <a-layout>
         <GlobalSider class = "sider" />
          <a-layout-content class = "content">
          <router-view />
         </a-layout-content>
         </a-layout>
    </a-layout>
    </div>
  </template>

<script setup lang="ts">
import GlobalHeader from "@/components/GlobalHeader.vue";
import GlobalSider from "@/components/GlobalSider.vue";
</script>


<style scoped>
#basicLayout .header{
  padding-inline: 20px;
  background: #fff;
  color: unset;
  margin-bottom: 1px;
}

#basicLayout .sider {
  background: #fff;
  border-right: 0.5px solid #fff;
  padding-top: 5px
}


#basicLayout :deep(.ant-menu-root){
  border-bottom: none !important;
  border-inline-end: none !important;
}

#basicLayout .content{
  padding: 10px;
  background: linear-gradient(to right, #fefefe, #fff);
  margin-bottom: 20px;
}

#basicLayout .footer {
    background: #efefef;
    padding:16px;
    bottom: 0;
    left:0;
    right:0;
    text-align: center;
}

</style>
